<template>
  <div id="app">

      <div class="header">
        <el-header>
          <TopBar></TopBar>
        </el-header>
      </div>
      <div class="main">
        <el-main>
          <Kernel></Kernel>
        </el-main>
      </div>


      <div class="footer">
        <el-footer>
          <CopyRights></CopyRights>
        </el-footer>
      </div>


  </div>
</template>

<script>
import TopBar from "@/components/TopBar";
import Kernel from "@/components/Kernel";
import CopyRights from "@/components/CopyRights";

export default {
  name: 'App',
  components: {
    CopyRights,
    TopBar,
    Kernel
  }
}
</script>

<style>

  .header,.footer{
    background-color: #B3C0D1;
  }
  
  .main{
    background-color: #E9EEF3;
  }

  .el-main,.el-header, .el-footer{
    padding-left: 0 !important;
    padding-right: 0 !important;
    width: 1199px;
    margin: auto;
  }

  .el-header{
    background-color: #B3C0D1;
    color: #333;
    text-align: center;
    line-height: 60px;
  }

  .el-footer{
    background-color: #B3C0D1;
    color: #333;
    text-align: center;
    padding-bottom: 30px !important;
    height: 200px !important;
  }

  .el-main {
    background-color: #E9EEF3;
    color: #333;
    text-align: center;
    padding-top: 10px !important;
    padding-bottom: 10px !important;
  }
</style>
